<template>
    <div class="ccui-app-container">
        <div class="ccui-advanced-search-wrapper ccui-clearfix">
            <el-search
                ref="search"
                :formProp="formData"
                @search="search"
                @change="change"
                :isShowSearch="true"
                :selectClear="true"
                class="ccui-highsearch no-print"
            >
                <div class="ccui-tab-wrapper">
                    <el-button
                        :type="
                            isActive === index
                                ? 'table-top-active'
                                : 'table-top'
                        "
                        size="mini"
                        v-for="(item, index) in focuses"
                        :key="'tab' + index"
                        @click="tabChange(item.focus)"
                    >
                        <template v-if="item.focus === 0">全部 </template>
                        <template v-if="item.focus === 1">待提交</template>
                        <template v-else-if="item.focus === 2">审批中</template>
                        <template v-else-if="item.focus === 3"
                            >审批退回（{{ totalNum }}）</template
                        >
                    </el-button>
                </div>
                <div class="ccui-extend-btn">
                    <el-button
                        type="primary"
                        ref="pcconclease-new-item"
                        icon="icon-ccui-add-sup"
                        @click="goAdd"
                        >新增
                    </el-button>
                </div>
                <template slot="search">
                    <el-input
                        v-model="formData.moveInventoryName"
                        clearable
                        searchLabel="移库单名称"
                        placeholder="请输入移库单名称模糊查询"
                        @blur="handleTrim('moveInventoryName')"
                    ></el-input>
                    <el-input
                        v-model="formData.moveInventoryCode"
                        clearable
                        searchLabel="移库单编号"
                        placeholder="请输入移库单编号模糊查询"
                    ></el-input>
                    <el-input
                        v-model="formData.reportInOrgName"
                        clearable
                        searchLabel="填报单位"
                        placeholder="请输入填报单位模糊查询"
                    ></el-input>
                    <el-input
                        v-model="formData.originalWarehouseName"
                        clearable
                        searchLabel="原仓库"
                        placeholder="请输入原仓库模糊查询"
                        @blur="handleTrim('originalWarehouseName')"
                    ></el-input>
                    <el-input
                        v-model="formData.targetWarehouseName"
                        clearable
                        searchLabel="目标仓库"
                        placeholder="请输入目标仓库模糊查询"
                        @blur="handleTrim('targetWarehouseName')"
                    ></el-input>

                    <el-date-picker
                        v-model="formData.reportTime"
                        searchLabel="编制日期"
                        clearable
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                    />
                </template>
                <!-- 表单高级搜索 -->
                <el-input
                    v-model="formData.moveInventoryName"
                    clearable
                    searchLabel="移库单名称"
                    placeholder="请输入移库单名称模糊查询"
                    slot="searchItem1"
                    @blur="handleTrim('moveInventoryName')"
                ></el-input>
                <el-input
                    v-model="formData.moveInventoryCode"
                    clearable
                    searchLabel="移库单编号"
                    placeholder="请输入移库单编号模糊查询"
                    slot="searchItem2"
                ></el-input>
                <el-input
                    v-model="formData.reportInOrgName"
                    clearable
                    searchLabel="填报单位"
                    placeholder="请输入填报单位模糊查询"
                    slot="searchItem3"
                ></el-input>
                <el-input
                    v-model="formData.originalWarehouseName"
                    clearable
                    searchLabel="原仓库"
                    placeholder="请输入原仓库模糊查询"
                    slot="searchItem4"
                    @blur="handleTrim('originalWarehouseName')"
                ></el-input>
                <el-input
                    v-model="formData.targetWarehouseName"
                    clearable
                    searchLabel="目标仓库"
                    placeholder="请输入目标仓库模糊查询"
                    slot="searchItem5"
                    @blur="handleTrim('targetWarehouseName')"
                ></el-input>

                <el-date-picker
                    v-model="formData.reportTime"
                    searchLabel="编制日期"
                    clearable
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    slot="searchItem7"
                />
            </el-search>
        </div>
        <div class="ccui-multifunctional-table-wrapper">
            <el-table
              :data="tableData"
              :fit="true"
              :cell-style="cellStyle"
              @cell-click="cellClick"
              border
              class="ccui-multifunctional-table"
            >
          <el-table-column label="序号" width="50" fixed>
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <template v-for="(table, index) in jsList.tableTheadOptions">
            <el-table-column
              :fixed="table.fixed || false"
              :key="index"
              :type="table.type"
              :label="table.label"
              :min-width="table.width"
              :prop="table.prop"
              :align="table.align || 'left'"
              :header-align="table.headerAlign || 'left'"
              :show-overflow-tooltip="true"
              :formatter="formatterList[table.formatterName]"
            >
            </el-table-column>
          </template>

          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                type="text"
                v-if="row.billStatus == '待提交' || row.billStatus == '已撤回' || row.billStatus == '审批退回'"
                @click="goEdit(row)"
                >编辑
              </el-button>
               <el-button
                size="mini"
                type="text"
                v-if="row.billStatus == '已撤回' || row.billStatus == '待提交'"
                @click="goDelete(row)"
                >删除
              </el-button>
              <el-button
                size="mini"
                type="text"
                v-if="row.billStatus == '审批中'"
                @click="goRecall(row)"
                >撤回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ccui-table-footer">
          <div id="ccui-paging">
            <el-pagination
              :total="totalNum"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @prev-click="handlePrev"
              @next-click="handleNext"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleSizeChange('none')"
              >确定
            </el-button>
          </div>
        </div>
        </div>

    </div>
</template>

<script>
import moveStore from "../mixins/moveStore";
import jsList from '../js';
export default {
    mixins: [moveStore],
    data() {
        return {
            jsList,
            isActive:3
        };
    },
    methods:{
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (["移库单编号"].includes(column.label)) {
                return { color: "#0089EF", cursor: "pointer" };
            }
        },
    }
};
</script>

<style lang="scss" scoped>
</style>
